<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
		<style>
			table#tab{
				border: 1px solid red;
				border-collapse: collapse;/* 为表格设置合并边框模型 */
				width: 500px;
			}
			
			table#tab tr,
			table#tab tr th,
			table#tab tr td{
				border: 1px solid lightgreen;
			}
		</style>
	<body>
		<div id="box">
			<div id="entry">
				<div id="user">
					<label>
						用户名:<input type="text" value="xz" placeholder="请输入姓名" />
					</label><br />
					<label>
						年龄:<input type="number" value=0 />
					</label>
				</div>
				<div id="sex">
					性别<br/>
					<label>
						男:<input type="radio" name="sex" value=0 checked />
					</label>	
					<label>
						女:<input type="radio" name="sex" value=1  />
					</label>
				</div>
				<div id="hobby">
					爱好:<br/>
					<label>
						学习 <input type="checkbox" value="h1" />
					</label>
					<label>
						健身 <input type="checkbox" value="h2" />
					</label>
					<label>
						游泳 <input type="checkbox" value="h3" />
					</label>
					<label>
						工作 <input type="checkbox" value="h4" />
					</label>
					<label>
						看电影 <input type="checkbox" value="h5" />
					</label>
					<div>
						<label>
							全选/全不选<input type="checkbox" id="checkAll"/>
						</label>
						<button type="button" id="notCheck">反选</button>
					</div>
				</div>
				<div id="education">
					学历:<br />
					<select>
						<option value="e1">小学</option>
						<option value="e2">中学</option>
						<option value="e3">高中</option>
						<option value="e4">大学</option>
					</select>
				</div>
				<br />
				<div>
					<button type="button" onclick="add()">添加</button>
				</div>
			</div>
			<div id="show">
				<table id="tab">
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>年龄</th>
							<th>性别</th>
							<th>爱好</th>
							<th>操作</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
		<script>
			// 添加数据
			var arr=[];
			function add(){
				var userIpts=document.querySelectorAll("div#user>label input");
				var user=userIpts[0].value;
				var age=userIpts[1].value;
				var educationSleect=document.querySelector("#education>select")
				if(user&&age){
					var sex=getUserSex();
					console.log("sex:",sex);
					var hobby=getUserHobyy();
					var education=educationSleect.value;
					var obj={
						id:+new Date(),
						user:user,
						age:age,
						sex:sex,
						hobby:hobby,
						education:education
					}
					
					arr.push(obj);
					console.log("最新数据:",arr);
					
				}else{
					alert("用户名和年龄不能为空");
				}
			}
			// 获取姓名和年龄
			function getUserSex(){
				var sexIpts=document.querySelectorAll("div#sex>label input");
				var sex;
				if(sexIpts[0].checked){
					sex=sexIpts[0].value;
				}else{
					sex=sexIpts[1].value;
				}
				return sex;
			}
			// 获取爱好
			function getUserHobyy(){
				var hobbyIpts=document.querySelectorAll("div#hobby>label input");
				var hobby=[];
				for(var i=0;i<hobbyIpts.length;i++){
					if(hobbyIpts[i].checked){
						hobby.push(hobbyIpts[i].value);
					}
				}
				return hobby;
			}
			// 全选或者全不选
			var checkAll=document.getElementById("checkAll");
			checkAll.onclick=function(){
				var f=this.checked;
				var ipts=document.querySelectorAll("div#hobby>label>input");
				for(var i=0;i<ipts.length;i++){
					ipts[i].checked=f;
				}
			}
			//反选
			var notCheck=document.getElementById("notCheck");
			notCheck.onclick=function(){
				var ipts=document.querySelectorAll("div#hobby>label>input");
				for(var i=0;i<ipts.length;i++){
					ipts[i].checked= !ipts[i].checked;
				}
				fn1();
			}
			//是否需要选中或者全选
			var ipts=document.querySelectorAll("div#hobby>label>input");
			for(var i=0;i<ipts.length;i++){
				ipts[i].onclick=function(){
					fn1();
				}
			}
			function fn1(){
				var f=true;
				for(var a=0;a<ipts.length;a++){
					if(!ipts[a].checked){
						f=false;
						break;
					}
				}
				checkAll.checked=f;
			}
			// 渲染页面
			function showPage(arr){
				var tbody=document.getElementById("tbody");
				tbody.innerHTML="";
				var trs="";
				for(var i=0;i<arr.length;i++){
					trs+=`
						<tr>
							<td>${i}</td>
							<td>${arr[i].user}</td>
							<td>${arr[i].age}</td>
							<td>${arr[i].sex=="0"?"小哥哥":"小姐姐"}</td>
							<td>${setEducation(arr[i].education)}</td>
							<td>${setHobby(arr[i].hobby)}</td>
							<td>
								<a onclick=upd(${JSON.stringify(arr[i])})>编辑</a>
								<a onclick=del(${arr[i].id})>删除</a>
							</td>
						</tr>
					`;
				}
				tbody.innerHTML=trs;
			}
			function upd(obj){
				console.log("你要修改的数据:",obj);
			}
			function del(id){
				console.log("你要删除的id:",id);
			}
			function setEducation(attr){
				var obj={
					e1:"小学",
					e2:"中学",
					e3:"高中",
					e4:"大学",
				}
				console.log("attr:",attr,"obj["+attr+"]:",obj[attr]);
				return obj[attr];
			}
			//返回爱好
			function setHobby(arr){
				console.log("arr:",arr);
				var obj={
					h1:"学习",
					h2:"健身",
					h3:"游泳",
					h4:"工作",
					h5:"看电影",
				}
				var str="";
				for(var i=0;i<arr.length;i++){
					if(i==arr.length-1){
						str+=obj[arr[i]];
					}else{
						str+=obj[arr[i]]+","
					}
				}
				console.log("str:",str)
				return str;
			}
		</script>
	</body>
</html>
